<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <label style="margin-right: 5px">员工姓名：</label>
        <el-input
          v-model="name"
          placeholder="请输入姓名"
          style="width: 15%; margin-right: 20px"
        ></el-input>
        <el-button type="primary" @click="pageQuery()">查询</el-button>
        <el-button type="primary" @click="handleAddEmp()" style="float: right">+添加员工</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="records" stripe style="width: 100%">
        <el-table-column prop="name" label="员工姓名" width="180">
        </el-table-column>
        <el-table-column prop="username" label="账号" width="180">
        </el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="status" label="账号状态">
          <template slot-scope="scope">
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="最后操作时间"
        ></el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleUpdataEmployee(scope.row)" type="text"
             style='color:#419eff'>修改</el-button>
            <el-button @click="hangdleStartOrStop(scope.row)" type="text" 
            :class="{'enable-button': scope.row.status !== 1, 'disable-button': scope.row.status == 1}">
            {{ scope.row.status === 1 ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页条 -->
      <el-pagination
        class="pageList"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { getEmployeeList, enableOrDisableEmployee } from '@/api/employee'
export default {
  //定义模型数据
  data() {
    return {
      name: '', //员工姓名
      page: 1,
      pageSize: 10,
      total: 0,
      records: [],
    }
  },
  //vue生命周期方法 页面加载好之后就发出一次请求
  created() {
    this.pageQuery()
  },
  methods: {
    //分页查询
    pageQuery() {
      //准备请求参数
      const params = {
        name: this.name,
        page: this.page,
        pageSize: this.pageSize,
      }
      //发送ajax请求 访问后端服务，获取分页数据
      getEmployeeList(params)
        .then((res) => {
          if (res.data.code === 1) {
            this.total = res.data.data.total
            this.records = res.data.data.records
          }
        })
        .catch((err) => {
          this.$message.error('请求出错了: ' + err.message)
        })
    },
    //每页记录数发生变化触发
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageQuery()
    },
    //页码发生变化
    handleCurrentChange(page) {
      this.page = page
      this.pageQuery()
    },
    //启用禁用员工账号
    hangdleStartOrStop(row) {
      //禁止修改超级管理员账号状态
      if(row.username === 'admin'){
        this.$message.error("admin为系统管理员账号，不能修改账号状态");
        return;
      }
      this.$confirm('确认修改当前员工账号状态吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
          const statusJSON = {
            id: row.id,
            status: row.status === 1 ? 0 : 1,
          }
          enableOrDisableEmployee(statusJSON).then((res) => {
            if (res.data.code === 1) {
              this.$message.success('员工账号状态修改成功!')
              this.pageQuery()
            }
          })
        })
    },
    //挑战到新增员工页面(组件)
    handleAddEmp(){
      //路由挑战到组件
      this.$router.push('employee/add')
    },
    //进行跳转到修改员工信息(组件)
    handleUpdataEmployee(row){
      //不能修改超级管理员
      if(row.username === 'admin'){
        this.$message.error("admin为超级管理员不能修改")
        return;
      }
      //挑战到修改页面，通过地址栏传递参数
      this.$router.push({
        path:'/employee/add',
        query:{id:row.id},
        // 将 row 对象转换为字符串
        //query: { data: JSON.stringify(row) },   
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.disabled-text {
  color: #bac0cd !important;
}

.enable-button {
  color: #41aafc; /* 或者任何你希望用于“启用”的颜色 */
}

.disable-button {
  color: #f56c6c; /* 或者任何你希望用于“禁用”的颜色 */
}
</style>
